<template>
	<div>
		<nav class="bg-white shadow-sm border-b border-gray-200 fixed top-0 left-0 right-0 z-30">
			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div class="flex justify-between h-16">
					<div class="flex items-center">
						<div class="flex-shrink-0 flex items-center">
							<div class="logo-icon h-8 w-auto">
								<School />
							</div>
							<span class="ml-2 text-xl font-semibold text-gray-900">班级管理系统</span>
						</div>
					</div>
					<div class="flex items-center">
						<el-button type="primary" size="default" class="rounded px-6 font-medium"
							@click="goHome">返回首页</el-button>
					</div>
				</div>
			</div>
		</nav>

		<!-- 上方空白区域 -->
		<div class="h-32 bg-white"></div>

		<!-- 主要内容区域 -->
		<div class="container mx-auto px-8 py-8">
			<!-- 页面标题 -->
			<div class="text-center mb-12">
				<h1 class="text-4xl font-bold text-gray-900 mb-4">班级管理功能演示</h1>
				<p class="text-xl text-gray-600">体验完整的班级管理解决方案</p>
			</div>

			<!-- 功能卡片 -->
			<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
				<!-- 教师/管理员端 -->
				<div
					class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300">
					<div class="h-48 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
						<el-icon class="text-white text-6xl">
							<School />
						</el-icon>
					</div>
					<div class="p-8">
						<h3 class="text-2xl font-bold mb-4 text-gray-900">教师/管理员端</h3>
						<p class="text-gray-600 mb-6 leading-relaxed">
							完整的班级管理功能，包括创建、编辑、删除班级，管理学生，导出数据等。
						</p>
						<div class="space-y-3 mb-6">
							<div class="flex items-center gap-3 text-sm text-gray-700">
								<el-icon class="text-green-500">
									<Check />
								</el-icon>
								<span>班级列表管理</span>
							</div>
							<div class="flex items-center gap-3 text-sm text-gray-700">
								<el-icon class="text-green-500">
									<Check />
								</el-icon>
								<span>搜索和筛选</span>
							</div>
							<div class="flex items-center gap-3 text-sm text-gray-700">
								<el-icon class="text-green-500">
									<Check />
								</el-icon>
								<span>批量操作</span>
							</div>
							<div class="flex items-center gap-3 text-sm text-gray-700">
								<el-icon class="text-green-500">
									<Check />
								</el-icon>
								<span>数据导出</span>
							</div>
						</div>
						<router-link to="/classes">
							<el-button type="primary" size="large" class="w-full">
								进入班级管理
							</el-button>
						</router-link>
					</div>
				</div>

				<!-- 学生端（保留，用于对比） -->
				<div
					class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300">
					<div class="h-48 bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
						<el-icon class="text-white text-6xl">
							<User />
						</el-icon>
					</div>
					<div class="p-8">
						<h3 class="text-2xl font-bold mb-4 text-gray-900">学生端</h3>
						<p class="text-gray-600 mb-6 leading-relaxed">
							便捷的班级加入功能，支持通过班级ID或邀请码申请加入，查看申请状态等。
						</p>
						<div class="space-y-3 mb-6">
							<div class="flex items-center gap-3 text-sm text-gray-700">
								<el-icon class="text-green-500">
									<Check />
								</el-icon>
								<span>查看已加入班级</span>
							</div>
							<div class="flex items-center gap-3 text-sm text-gray-700">
								<el-icon class="text-green-500">
									<Check />
								</el-icon>
								<span>申请加入新班级</span>
							</div>
							<div class="flex items-center gap-3 text-sm text-gray-700">
								<el-icon class="text-green-500">
									<Check />
								</el-icon>
								<span>班级ID/邀请码</span>
							</div>
							<div class="flex items-center gap-3 text-sm text-gray-700">
								<el-icon class="text-green-500">
									<Check />
								</el-icon>
								<span>申请记录管理</span>
							</div>
						</div>
						<router-link to="/student-classes">
							<el-button type="success" size="large" class="w-full">
								进入我的班级
							</el-button>
						</router-link>
					</div>
				</div>
			</div>

			<!-- 特色功能展示 -->
			<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
				<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
					<div class="flex items-center gap-4 mb-4">
						<div class="p-3 bg-blue-100 rounded-lg">
							<el-icon class="text-blue-600">
								<Search />
							</el-icon>
						</div>
						<h3 class="text-xl font-bold text-gray-900">智能搜索</h3>
					</div>
					<p class="text-gray-600 text-sm">快速查找班级和学生信息，支持多条件组合筛选</p>
				</div>

				<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
					<div class="flex items-center gap-4 mb-4">
						<div class="p-3 bg-purple-100 rounded-lg">
							<el-icon class="text-purple-600">
								<Key />
							</el-icon>
						</div>
						<h3 class="text-xl font-bold text-gray-900">权限管理</h3>
					</div>
					<p class="text-gray-600 text-sm">灵活的权限控制，确保教师对班级的管理权限</p>
				</div>

				<div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
					<div class="flex items-center gap-4 mb-4">
						<div class="p-3 bg-green-100 rounded-lg">
							<el-icon class="text-green-600">
								<Download />
							</el-icon>
						</div>
						<h3 class="text-xl font-bold text-gray-900">数据导出</h3>
					</div>
					<p class="text-gray-600 text-sm">支持导出班级数据，便于数据分析和备份</p>
				</div>
			</div>

			<!-- 快速体验 -->
			<div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-8 text-white text-center">
				<h3 class="text-2xl font-bold mb-4">立即体验</h3>
				<p class="text-blue-100 mb-6">点击下方按钮快速体验班级管理功能</p>
				<div class="flex gap-4 justify-center">
					<router-link to="/classes">
						<el-button type="primary" size="large"
							class="bg-white text-blue-600 border-white hover:bg-gray-50">
							班级管理演示
						</el-button>
					</router-link>
					<router-link to="/student-classes">
						<el-button size="large"
							class="bg-transparent text-white border-white hover:bg-white hover:text-blue-600">
							学生端演示
						</el-button>
					</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		School,
		User,
		Key,
		Search,
		Download,
		Check
	} from '@element-plus/icons-vue'

	const goHome = () => {
		window.location.href = '/home'
	}
</script>

<style scoped>
	.logo-icon {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
	}

	.logo-icon svg {
		width: 100%;
		height: 100%;
	}
</style>